<template>
  <div class="home-container">
    <Navbar />
    
    <el-container class="content-container">
      <el-aside width="280px">
        <el-card class="sidebar-card">
          <h3>文章分类</h3>
          <el-menu
            default-active="1"
            class="category-menu"
            mode="vertical"
          >
            <el-menu-item index="1">国内新闻</el-menu-item>
            <el-menu-item index="2">国际新闻</el-menu-item>
            <el-menu-item index="3">科技新闻</el-menu-item>
            <el-menu-item index="4">娱乐新闻</el-menu-item>
            <el-menu-item index="5">体育新闻</el-menu-item>
          </el-menu>
          
          <div class="hot-tags" style="margin-top: 30px;">
            <h3>热门标签</h3>
            <el-tag
              v-for="tag in hotTags"
              :key="tag"
              :size="tagSize"
              :effect="tagEffect"
              @click="handleTagClick(tag)"
            >{{ tag }}</el-tag>
          </div>
        </el-card>
      </el-aside>
      
      <el-container>
        <el-header class="content-header">
          <div class="header-content">
            <h1>最新文章</h1>
            <el-button 
              type="primary" 
              @click="goToAddArticle"
              v-if="isLoggedIn"
            >
              发布文章
            </el-button>
          </div>
        </el-header>
        
        <el-main class="article-list">
          <div class="search-container">
            <el-input
              v-model="searchQuery"
              placeholder="搜索文章..."
              prefix-icon="el-icon-search"
              class="search-input"
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button @click="handleSearch">搜索</el-button>
              </template>
            </el-input>
          </div>
          
          <el-row :gutter="20" v-if="articles.length > 0">
            <el-col :span="24" sm="12" md="8" lg="6" v-for="article in filteredArticles" :key="article.id">
              <ArticleCard :article="article" />
            </el-col>
          </el-row>
          
          <el-empty v-else description="暂无文章"></el-empty>
          
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'
import { useArticleStore } from '@/stores/articleStore'
import Navbar from '@/components/Navbar.vue'
import ArticleCard from '@/components/ArticleCard.vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const articleStore = useArticleStore()

// 数据状态
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchQuery = ref('')
const hotTags = ref(['热点', '科技', '娱乐', '体育', '财经', '社会', '国际', '教育'])
const tagSize = ref('medium')
const tagEffect = ref('plain')

// 计算属性：过滤搜索结果
const filteredArticles = computed(() => {
  if (!searchQuery.value) {
    return articleStore.articles
  }
  
  return articleStore.articles.filter(article => 
    article.title.includes(searchQuery.value) || 
    article.content.includes(searchQuery.value) || 
    article.author.includes(searchQuery.value)
  )
})

// 计算属性：是否已登录
const isLoggedIn = computed(() => userStore.isLoggedIn)

// 生命周期钩子
onMounted(async () => {
  await fetchArticles()
})

// 获取文章列表
const fetchArticles = async (page = currentPage.value, size = pageSize.value) => {
  try {
    await articleStore.fetchAllArticles(page, size)
    currentPage.value = articleStore.currentPage
    pageSize.value = articleStore.pageSize
    total.value = articleStore.total
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '获取文章列表失败')
  }
}

// 处理页码变更
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchArticles(page, pageSize.value)
}

// 处理每页数量变更
const handleSizeChange = (size: number) => {
  pageSize.value = size
  fetchArticles(currentPage.value, size)
}

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    fetchArticles(1, pageSize.value)
  }
}

// 处理标签点击
const handleTagClick = (tag: string) => {
  searchQuery.value = tag
  fetchArticles(1, pageSize.value)
}

// 前往添加文章页面
const goToAddArticle = () => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  router.push('/add-article')
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.content-container {
  height: calc(100vh - 60px);
}

.content-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  align-items: center;
}

.header-content h1 {
  margin-right: 20px;
}

.article-list {
  padding: 0 20px;
  background-color: #fff;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.sidebar-card {
  height: 100%;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin-bottom: 20px;
}

.category-menu {
  border-right: none;
}

.hot-tags {
  margin-top: 20px;
}
</style>